<template>
    <div>
       姓名 <input type="text" v-model="name">
       <br>
       <input type="radio" name="sex" value="male" v-model="sex" id="sex-m">
       <label for="sex-m">男</label>
       <input type="radio" name="sex" value="female" v-model="sex" id="sex-f">
       <label for="sex-f">女</label>
       {{ sex }}
       <br>
       爱好
       <input type="checkbox"  value="song"  name="hobby" v-model="hobby">弹唱
       <input type="checkbox"  value="cook"  name="hobby" v-model="hobby">做饭
       <input type="checkbox"  value="hide"  name="hobby" v-model="hobby">爬山
       {{ hobby }}
       <br>
       城市
       <select name="city" v-model="city">
       <option value="suzhou">苏州</option>
       <option value="shanghai">上海</option>
       <option value="anhui">安徽</option>
       <option value="zhejiang">浙江</option>
       {{ city }}
    </select>
       <br>
       <textarea cols="30" rows="10" v-model="desc"></textarea>
       {{ desc }}
       <button @click="submit">提交</button>
    </div>
    </template>
    
    <script>
    export default {
       data(){
          return{
             name: '',
             sex: '',
             hobby:[],
             city:'',
             desc: ''
          }
       },
       methods:{
          submit(){
             console.log('姓名',this.name);
             console.log('性别',this.sex);
             console.log('爱好',this.hobby);
             console.log('城市',this.city);
             console.log('简介',this.desc);
          }
       }
    }
    </script>
    
    <style>
    
    </style>